<template>
  <div class="good">
    <img :src="phone.image" alt="" class="img" />
    <div class="content">
      <div class="title">{{ phone.name }}</div>
      <div class="desc van-multi-ellipsis--l2">{{ phone.desc }}</div>
      <div class="price">{{ phone.price }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  phone: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped>
.good {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  gap: 5px;
  box-sizing: border-box;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
.desc {
  font-size: 14px;
  color: #666;
}
.price {
  font-size: 16px;
  color: #ee0a24;
}
.price::before {
  content: "¥";
}
.price::after {
  content: "元";
}
.price::before,
.price::after {
  font-size: 14px;
  color: #999;
  padding: 5px;
}
</style>
